<template>
  <section>
    <search-box>
      <div class="search-box">
        <div class="search-input">
          <el-select v-model="search_item">
            <el-option v-for="(value, key) in search_list" :key="key" :value="key" :label="value.label"></el-option>
          </el-select>
        </div>
        <div class="search-input">
          <el-input v-model="search_list[search_item].value" v-if="!search_list[search_item].list"></el-input>
          <el-select v-model="search_list[search_item].value" v-else>
            <el-option v-for="item in search_list[search_item].list" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </div>
        <div class="search-input m-left20">
          <el-button type="primary" @click="FnGetClusterList(1)">查询</el-button>
        </div>
      </div>
    </search-box>

    <el-table :data="cluster_list" border stripe>
      <el-table-column prop="cluster_name" label="集群名称"></el-table-column>
      <el-table-column prop="cluster_id" label="集群ID"></el-table-column>
      <el-table-column prop="customer_id" label="客户ID"></el-table-column>
      <el-table-column prop="customer_name" label="客户名称"></el-table-column>
      <el-table-column prop="status_str" label="集群状态"></el-table-column>
      <el-table-column prop="site_name" label="可用区"></el-table-column>
      <el-table-column prop="app_name" label="VDC"></el-table-column>
      <el-table-column prop="k8s_version" label="k8s版本">
        <template #default="scope">
          v{{scope.row.k8s_version}}
        </template>
      </el-table-column>
      <el-table-column prop="node_num" label="节点数"></el-table-column>
      <el-table-column label="总CPU核数/内存数">
        <template #default="scope">
          {{scope.row.total_cpu}}/{{scope.row.total_ram}}
        </template>
      </el-table-column>
      <el-table-column prop="apiserver" label="apiserver domain"></el-table-column>
      <el-table-column prop="ros_public_ip" label="apiserver ip"></el-table-column>
      <el-table-column prop="ingress_domain" label="ingress域名"></el-table-column>
      <el-table-column prop="ingress_ip" label="Ingress IP"></el-table-column>
      <el-table-column prop="create_time" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="130">
        <template #default="scope">
          <el-button 
            type="text" 
            style="padding-left: 0;padding-right:0;" 
            @click="FnToDetail(scope.row, 'node')"
            :disabled="FnBtnDisabled('node')">查看节点</el-button>
          <el-button 
            type="text" 
            style="padding-left: 0;padding-right:0;" 
            @click="FnToDetail(scope.row, 'nat')"
            :disabled="FnBtnDisabled('snat')">查看nat</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-box">
      <el-pagination
              @current-change="handleCurrentChange"
              :current-page="page_index"
              :page-size="page_size"
              layout="total, prev, pager, next"
              :total="total">
      </el-pagination>
    </div>
  </section>
</template>

<script>
import searchBox from '../../components/search-box.vue'
import Service from '@/service/cluster'
import {authBtnDisabled} from '@/utils/auth.js'
export default {
  components: { searchBox },
  data() {
    return {
      search_item: "customer_id",
      search_list: {
        customer_id: {label: "客户ID", value: ""},
        cluster_name: {label: "集群名称", value: ""},
        cluster_id: {label: "集群ID", value: ""},
        version: {label: "K8S版本", value: "", list: [
          {label: "v1.19.3", value: "1.19.3"},
          {label: "v1.17.0", value: "1.17.0"},
          {label: "v1.16.15", value: "1.16.15"},
        ]},
        status: {label: "集群状态", value: "", list: [
          {label: "正常", value: "ok"},
          {label: "错误", value: "error"},
          {label: "创建中", value: "creating"},
          {label: "更新中", value: "updating"},
          {label: "删除中", value: "deleting"}
        ]}
      },
      cluster_list: [],
      page_index: 1,
      page_size: 10,
      total: 0
    }
  },
  methods: {
    FnToDetail(row, type) {
      if (type == 'node') {
        this.$router.push({name: "node_list", query: {id: row.cluster_id, customer_id: row.customer_id, user_id: row.user_id}})
      } else if (type == 'nat') {
        this.$router.push({name: "snat_list", query: {id: row.cluster_id}})
      }

    },
    FnGetClusterList(page) {
      if(page) this.page_index = page
      let reqData = {
        page_index: this.page_index,
        page_size: this.page_size,
      }
      if(this.search_list[this.search_item].value) reqData[this.search_item] = this.search_list[this.search_item].value
      Service.get_cluster_list(reqData).then(resData => {
        if(resData.code == "Success") {
          this.cluster_list = resData.data.cluster_list
          this.total = resData.data.cluster_count
        }
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.FnGetClusterList()
    },
    FnBtnDisabled(key) {
      return authBtnDisabled(key, this.$route.meta.name)
    }
  },
  created() {
    if(this.$route.params.id) {
      this.search_list.customer_id.value = this.$route.params.id
    } else if(this.$route.query.cluster_id) {
      this.search_list.cluster_id.value = this.$route.query.cluster_id
      this.search_item = 'cluster_id'
    } else {
      this.search_list.customer_id.value = 'E104616'
    }
    this.FnGetClusterList()
  }
}
</script>

<style lang="scss" scoped>
.search-box {
  display: flex;
}
.m-left20 {
  margin-left: 40px;
}
.page-box {
  margin-top: 10px;
  text-align: right;
}
</style>